<!DOCTYPE html>
<html style="height:100%;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="Pragma" content="no-cache" />
    <title>IC卡挂失</title>
    <link rel="stylesheet" href="css/weui.min.css" />
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <link rel="stylesheet" href="fonts/qiheIC.css" />
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/weui.min.js"></script>
</head>
<style>
    .weui-loadmore {
        width: 100%;
        height: 100%;
        font-size: 14px;
        text-align: center;
        position: absolute;
        background: #fff;
        opacity: 1;
        z-index: 999;
        color: #fff;
        margin: 0px;
        line-height:400px;
    }

    .weui-loading {
        width: 40px;
        height: 40px;
    }
</style>

<body ontouchstart class="bg_ma" style="height:100%;background:#F5F5F5;">
    <div class="loading" style="display:none;">
        <div class="weui-loadmore">
            <i class="weui-loading"></i>
        </div>
    </div>
    <div class="weui-content">
        <div class="card-content" style="width:354px;height:208px;background:#fff;margin: 12px auto;box-shadow:1px 1px 4px rgba(0,0,0,0.08);border-radius:8px;position: relative;">
            <!-- 卡号 -->
            <div class="cardNumber" style="position:absolute;top:22px;right:32px;color: #333;font-size: 16px;">卡号：0000000000</div>
            <!-- 姓名 -->
            <div class="userName" style="position:absolute;top: 50px;right: 32px;color: #9F9F9F;font-size: 16px;">
                姓名：xxx
            </div>
            <!-- IC卡图标 -->
            <div class="ic-icon" style="width: 56px;height: 56px;background: #FF7700;border-radius:8px;position:absolute;top: 54px;left: 34px;">
                <img src="./images/xinpian.png" alt="" style="padding: 4px;">
            </div>
            <!-- IC卡状态 -->
            <div class="ICStatues">
                <!-- 状态1  正常 挂失  未绑定-->
            </div>

        </div>

        <!-- 按钮 申请恢复 立即挂失 -->
        <div class="frozenBtn" style="width:354px;margin:28px auto;">

        </div>

        <!-- 弹出层 正常情况下   挂失情况下 -->
        <div class="popup" style="width:100%;height:100%;position:fixed;top:0px;left:0px;background:rgba(159,159,159,0.7);display: none;">

        </div>
    </div>
</body>
<script src="./api.js"></script>
<script>
    window.onload = function () {
        $('.loading').css('display', 'block');
        let api = getApi();
        //获取本地缓存的用户信息
        let customerID = JSON.parse(localStorage.getItem('wxUserInfo')).data.customer.customerID;
        let token = JSON.parse(localStorage.getItem('wxUserInfo')).data.token;
        console.log(customerID, token)
        // 获取信息
        function getUserInfo() {
            fetch(`${api}/customer/${customerID}`, {
                method: "get",
                headers: {
                    'Content-type': 'application/json',
                    "Authorization": token
                }
            })
                .then(res => res.json())
                .then((data) => {
                    console.log(data)
                    if (data.state == true) {
                        //卡号
                        let cardNum = data.data.icCardID
                        data.data.icCardID ? $('.cardNumber').html(`卡号：${data.data.icCardID}`) : $('.cardNumber').html('');
                        //  姓名
                        data.data.customerName ? $('.userName').html(`姓名：${data.data.customerName}`) : $('.userName').html('');

                        //=======================判断IC卡的状态===================
                        let IcStates = data.data.icCardState;
                        console.log(IcStates,'IcStates')

                        //======情况1 挂失======
                        if (IcStates == false) {
                            let html = ` <button style="width:354px;height:34px;background:#9F9F9F;position:absolute;top:150px;left:0px;border: none;font-size: 16px;color: #fff;">
                                            状态：冻结
                                        </button>`
                            let frozenThml = `<button class="thaw" style="width:354px;height:44px;background:#00CFC4;border: none;font-size: 18px;color: #fff;border-radius:4px;letter-spacing: 1px;">
                                                    申请恢复
                                                </button>`

                            let popupHtml = `<div class="popup-box" style="width:294px;height:208px;background:rgba(255,255,255,1);border-radius:8px;margin: 127px auto;position: relative;">
                                                <div class="title" style="position:absolute;top:42px;left:38px;font-weight:bold;color:#F44831;">
                                                    请到公司管理处办理解冻或补卡
                                                </div>
                                                <div style="color:#9F9F9F;font-size:12px;">
                                                    <div style="position:absolute;top:76px;left:60px;">微信公众号支付功能可正常使用</div>
                                                    <div style="position:absolute;top:96px;left:60px;">您可使用微信公众号消费支付</div>
                                                </div>
                                                <div>
                                                    <button class="doYes" style="width:180px;height:36px;background:rgba(32,160,255,1);border-radius:8px;border: none;position: absolute;top: 148px;left: 57px;font-size: 16px;color: #fff;letter-spacing: 1px;">
                                                        知道了
                                                    </button>
                                                </div>
                                            </div>`
                            $('.loading').css('display', 'none');
                            $('.ICStatues').html(html);
                            $('.frozenBtn').html(frozenThml);
                            $('.popup').html(popupHtml);

                            //点击申请解冻
                            $('.thaw').on('click', function () {
                                $('.popup').css('display', 'block');
                            })

                            //点击我知道了
                            $('.doYes').on('click', function () {
                                $('.popup').css('display', 'none');
                            })

                        } else if (IcStates == true) {
                            //======情况2 正常====== 
                            let html = `<button style="width:354px;height:34px;background:rgba(0,207,196,1);position:absolute;top:150px;left:0px;border: none;font-size: 16px;color: #fff;">
                                            状态：正常
                                        </button>`
                            let frozenThml = `<button class="doFrozen" style="width:354px;height:44px;background:rgba(244,72,49,1);border: none;font-size: 18px;color: #fff;border-radius:4px;letter-spacing: 1px;">
                                                立即挂失
                                            </button>`
                            let popupHtml = `<div class="popup-box" style="width:294px;height:208px;background:rgba(255,255,255,1);border-radius:8px;margin: 127px auto;position: relative;">
                                                <div class="title" style="position:absolute;top:42px;left:74px;font-weight:bold;letter-spacing: 1px;">
                                                    确认<span style="color:#F44831;">立即挂失</span>IC卡？
                                                </div>
                                                <div style="color:#9F9F9F;font-size:12px;">
                                                    <div style="position:absolute;top:76px;left:74px;">挂失后IC卡${cardNum}将不能使用</div>
                                                    <div style="position:absolute;top:96px;left:74px;">微信公众号支付功能可正常使用</div>
                                                    <div style="position:absolute;top:116px;left:74px;color:#F44831;">如需恢复请到公司管理处恢复</div>
                                                </div>
                                                <div style="width:100%;border-bottom:1px solid #EEEEEE;position:absolute;top:160px;left:0px;"></div>
                                                <button class="doCancel" style="width:49%;border:none;border-right:1px solid #EEEEEE;height: 46px;position:absolute;top:161px;left:4px;background: #fff;color: #9F9F9F;font-size: 16px;">
                                                    取消
                                                </button>
                                                <button class="doSure" style="width:48%;border:none;height: 46px;position:absolute;top:161px;right:4px;background: #fff;color: #F44831;font-size: 16px;">
                                                    确定
                                                </button>
                                            </div>`
                            $('.loading').css('display', 'none');                
                            $('.ICStatues').html(html);
                            $('.frozenBtn').html(frozenThml);
                            $('.popup').html(popupHtml);
                            //点击立即挂失
                            $('.doFrozen').on('click', function () {
                                $('.popup').css('display', 'block');
                            })
                            //点击取消
                            $('.popup').on('click', '.doCancel', function () {
                                $('.popup').css('display', 'none');
                            })
                            //点击确定挂失
                            let data = {
                                customerID: customerID,
                                icCardState: 0
                            }
                            $('.popup').on('click', '.doSure', function () {
                                fetch(`${api}/customer/edit`, {
                                    method: "put",
                                    headers: {
                                        'Content-type': 'application/json',
                                        "Authorization": token
                                    },
                                    body: JSON.stringify(data)
                                })
                                    .then(res => res.json())
                                    .then(data => {
                                        if (data.state == true) {
                                            location.reload();
                                        }
                                    })
                            })
                        } else if (IcStates == null) {
                            let html = ` <button style="width:354px;height:34px;background:#9F9F9F;position:absolute;top:150px;left:0px;border: none;font-size: 16px;color: #fff;">
                                            状态：未绑定
                                        </button>`
                             $('.loading').css('display', 'none');
                            $('.ICStatues').html(html);
                            // //卡号
                            $('.cardNumber').html('');

                        }
                    }
                }).catch((err) => {
                    console.log(err)
                })
        }
        //获取用户信息
        getUserInfo();
    }
</script>

</html>